
<ion-content no-bounce>

  <ion-slides class="my-slides"
              #mySlider
              initialSlide="1"
              (ionSlideDidChange)="onSlideChanged()"
              (ionSlideDrag)="onSlideMove($event)">

    <ion-slide padding>
      <h1>Slide 1</h1>
      <button ion-button block (click)="goToPrevSlide()">Navigate Back</button>
      <button ion-button block (click)="goToNextSlide()">Navigate Forward</button>
      <button ion-button block (click)="goToSlide(2)">Navigate to 3rd Slide</button>
      <button ion-button block (click)="getLength()">Get Slide Length</button>
      <button ion-button block (click)="getIndex()">Get Index</button>
    </ion-slide>

    <ion-slide padding>
      <h1>Slide 2</h1>
      <button ion-button block (click)="goToPrevSlide()">Navigate Back</button>
      <button ion-button block (click)="goToNextSlide()">Navigate Forward</button>
      <button ion-button block (click)="goToSlide(2)">Navigate to 3rd Slide</button>
      <button ion-button block (click)="getIndex()">Get Index</button>
    </ion-slide>

    <ion-slide padding>
      <h1>Slide 3</h1>
      <button ion-button block (click)="goToPrevSlide()">Navigate Back</button>
      <button ion-button block (click)="goToNextSlide()">Navigate Forward</button>
      <button ion-button block (click)="getIndex()">Get Index</button>
    </ion-slide>

  </ion-slides>

</ion-content>